import { Input } from '@/components/ui/input'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { cn } from '@/lib/utils'

const tabs = [
  { value: '1', name: '1' },
  { value: '2', name: '2' },
  { value: '3', name: '3' },
]

const TabsDemo = (): JSX.Element => {

  return <div className='tabs-demo'>
    <Tabs
      orientation='vertical'
      defaultValue={tabs[0].value}
      className='max-w-md w-full flex flex-row items-start gap-4 justify-center'
    >
      <TabsList className='shrink-0 grid grid-cols-1 gap-1 p-0 bg-background'>
        {tabs.map((tab) => (
          <TabsTrigger
            key={tab.value}
            value={tab.value}
            className='data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5'
          >
            <div key={tab.value}>{tab.name}</div>
          </TabsTrigger>
        ))}
      </TabsList>
      <div className='h-40 flex items-center justify-center max-w-xs w-full border rounded-md font-medium text-muted-foreground'>
        {tabs.map((tab) => (
          <TabsContent key={tab.value} value={tab.value} className={cn('flex items-center justify-center h-full', 'data-[state=inactive]:hidden')} forceMount>
            <Input />
          </TabsContent>
        ))}
      </div>
    </Tabs>
  </div>

}

export default TabsDemo
